<template>
  <div class="dashboard-editor-container c-flex-row color-333">
		<div class="c-flex-grow1 c-width0">
			<div class="padding-tb10 c-flex-row c-aligni-center padding-b30">
				<div class="c-w0 c-flex-grow1 font-s20 font-bold">{{companyName}}</div>
			</div>
			<div class="c-flex-row">
				<div class="c-flex-grow1 c-w0 padding-r10">
					<div class="padding-b20">
						<span class="font-s16 font-bold">我的订单</span><router-link to="/order/index" class="padding-l12 color00a1fd font-s14">更多></router-link>
					</div>
					<div class="top-box text-center font-s14">
						<router-link to="/order/index" class="color-999 c-flex-column c-flex-grow1 c-w0 hover-class"><div class="color-999 hover-class-child ">今日订单</div><div class="hover-class-child  font-s20 color00a1fd padding-t20">{{ dayOrder }}</div></router-link>
						<router-link to="/order/index" class="color-999 c-flex-column c-flex-grow1 c-w0 hover-class"><div class="color-999 hover-class-child ">本周订单</div><div class="hover-class-child  font-s20 color-333 padding-t20">{{ weekOrder }}</div></router-link>
						<router-link to="/order/index" class="color-999 c-flex-column c-flex-grow1 c-w0 hover-class"><div class="color-999 hover-class-child ">本月订单</div><div class="hover-class-child  font-s20 color-333 padding-t20">{{ monthOrder }}</div></router-link>
					</div>
				</div>
				<div class="padding-l10 c-flex-grow1 c-w0">
					<div class="padding-b20">
						<span class="font-s16 font-bold">营业数据</span><router-link to="/financed/business" class="padding-l12 color00a1fd font-s14">更多></router-link>
					</div>
					<div class="top-box text-center font-s14">
						<router-link to="/financed/business" class="color-999 c-flex-column c-flex-grow1 c-w0 hover-class"><div class="color-999 hover-class-child ">今日收入</div><div class="hover-class-child  font-s20 color00a1fd padding-t20">{{ dayIncome }}</div></router-link>
						<router-link to="/financed/business" class="color-999 c-flex-column c-flex-grow1 c-w0 hover-class"><div class="color-999 hover-class-child ">本周收入</div><div class="hover-class-child  font-s20 color-333 padding-t20">{{ weekIncome }}</div></router-link>
						<router-link to="/financed/business" class="color-999 c-flex-column c-flex-grow1 c-w0 hover-class"><div class="color-999 hover-class-child ">本月收入</div><div class="hover-class-child  font-s20 color-333 padding-t20">{{ monthIncome }}</div></router-link>
					</div>
				</div>
			</div>

			<div class="font-s16 font-bold padding-t40 padding-b20">
				常用模块
			</div>
			<div class="top-box">
					<router-link to="/shopManage/basicDatum" class="hover-class padding-l20 c-flex-row c-aligni-center c-width6-10">
						<div class="svg-box-blue width38 height38 c-flex-row c-flex-center">
							<svg-icon icon-class="icon_basic_informati" class="icon-base-info"/>
						</div>
						<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">基础资料</span>
					</router-link>
					<router-link to="/shopManage/systemManage" class="hover-class padding-l20 c-flex-row c-aligni-center c-width6-10">
						<div class="svg-box-yellow width38 height38 c-flex-row c-flex-center">
							<svg-icon icon-class="icon_store_construct" class="icon-store-construct"/>
						</div>
						<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">店铺装修</span>
					</router-link>
					<router-link to="/shopManage/courseCategory" class="hover-class padding-l20 c-flex-row c-aligni-center c-width6-10">
						<div class="svg-box-red width38 height38 c-flex-row c-flex-center">
							<svg-icon icon-class="icon_classification" class="icon-cat"/>
						</div>
						<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">分类管理</span>
					</router-link>
					<router-link v-if="staff<1" to="/shopManage/accountMember" class="hover-class padding-l20 c-flex-row c-aligni-center c-width6-10">
						<div class="svg-box-blue width38 height38 c-flex-row c-flex-center">
							<svg-icon icon-class="icon_subaccount" class="icon-subaccount"/>
						</div>
						<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">子账号管理</span>
					</router-link>
					<router-link to="financed/cashManage" class="hover-class padding-l20 c-flex-row c-aligni-center c-width6-10">
						<div class="svg-box-green width38 height38 c-flex-row c-flex-center">
							<svg-icon icon-class="icon_withdrawal" class="icon-withdrawal"/>
						</div>
						<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">提现管理</span>
					</router-link>
					<router-link to="marketing/member/members" class="hover-class padding-l20 c-flex-row c-aligni-center c-width6-10">
						<div class="svg-box-red width38 height38 c-flex-row c-flex-center"><svg-icon icon-class="icon_user" class="icon-user"/></div>
						<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">用户管理</span>
					</router-link>
			</div>
			<div class="font-s16 font-bold padding-t40 padding-b20">
				知识产品
			</div>
			<div class="top-box">
					<router-link to="/knowledge/courses/videos" class="hover-class padding-l20 c-flex-row c-aligni-center c-width6-10">
						<div class="svg-box-blue width38 height38 c-flex-row c-flex-center"><svg-icon icon-class="icon_video" class="icon-video"/></div>
						<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">视频</span>
					</router-link>
					<router-link to="/knowledge/courses/audios" class="hover-class padding-l20 c-flex-row c-aligni-center c-width6-10">
						<div class="svg-box-yellow width38 height38 c-flex-row c-flex-center"><svg-icon icon-class="icon_audio" class="icon-audio"/></div>
						<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">音频</span>
					</router-link>
					<router-link to="/knowledge/courses/articles" class="hover-class padding-l20 c-flex-row c-aligni-center c-width6-10">
						<div class="svg-box-red width38 height38 c-flex-row c-flex-center"><svg-icon icon-class="icon_graphic" class="icon-graphic"/></div>
						<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">图文</span>
					</router-link>
					<router-link to="/knowledge/courses/previews" class="hover-class padding-l20 c-flex-row c-aligni-center c-width6-10">
						<div class="svg-box-blue width38 height38 c-flex-row c-flex-center"><svg-icon icon-class="icon_notice" class="icon-notice"/></div>
						<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">预告</span>
					</router-link>
					<router-link :to="companyInfo.enableColumnModule ? '/knowledge/columns':'/noOpen'" class="hover-class padding-l20 c-flex-row c-aligni-center c-width6-10">
						<div :class="companyInfo.enableColumnModule == 0 ? 'svg-box-yellow-no-open':'svg-box-yellow'" class=" width38 height38 c-flex-row c-flex-center relative">
							<div v-if="companyInfo.enableColumnModule == 0" class="box-no-open">未开通</div>							
							<svg-icon icon-class="icon_columns" class="icon-columns"/>
						</div>
						<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">专栏</span>
					</router-link>
					<router-link :to="companyInfo.enableExamModule ? '/knowledge/test':'/noOpen'" class="hover-class padding-l20 c-flex-row c-aligni-center c-width6-10">
						<div :class="companyInfo.enableExamModule == 0 ? 'svg-box-red-no-open':'svg-box-red'" class="width38 height38 c-flex-row c-flex-center relative">
							<div v-if="companyInfo.enableExamModule == 0" class="box-no-open">未开通</div>	
							<svg-icon icon-class="icon_evaluation" class="icon-evaluation"/>
						</div>
						<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">测评</span>
					</router-link>
			</div>

			<div class="c-flex-row padding-t40">
				<div class="c-flex-grow1 c-w0 padding-r10">
					<div class="padding-b20 font-s16 font-bold">
						互动产品
					</div>
					<div class="top-box">
						<router-link :to="companyInfo.enableActivityModule ? '/interaction/activities':'/noOpen'" class="hover-class padding-l20 c-flex-row c-aligni-center c-width0 c-flex-grow1">
						<div :class="companyInfo.enableActivityModule == 0 ? 'svg-box-blue-no-open':'svg-box-blue'" class="width38 height38 c-flex-row c-flex-center relative">
							<div v-if="companyInfo.enableActivityModule == 0" class="box-no-open">未开通</div>	
							<svg-icon icon-class="icon_activity" class="icon-activity"/>
						</div>
						<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">活动</span>
						</router-link>
						<router-link :to="companyInfo.enableSocialGroup ? '/interaction/social':'/noOpen'" class="hover-class padding-l20 c-flex-row c-aligni-center c-width0 c-flex-grow1">
							<div :class="companyInfo.enableSocialGroup == 0 ? 'svg-box-green-no-open':'svg-box-green'" class="width38 height38 c-flex-row c-flex-center relative">
								<div v-if="companyInfo.enableSocialGroup == 0" class="box-no-open">未开通</div>
								<svg-icon icon-class="icon_communities" class="icon-socail"/>
							</div>
							<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">社群</span>
						</router-link>
						<router-link to="interaction/comment" class="hover-class padding-l20 c-flex-row c-aligni-center c-width0 c-flex-grow1">
							<div class="svg-box-blue width38 height38 c-flex-row c-flex-center"><svg-icon icon-class="icon_comment" class="icon-comment"/></div>
							<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">评论</span>
						</router-link>
					</div>
				</div>
				<div class="padding-l10 c-flex-grow1 c-w0">
					<div class="padding-b20 font-s16 font-bold">
						营销管理
					</div>
					<div class="top-box">
						<router-link  :to="companyInfo.agentLevels? '/marketing/partner/partners':'/noOpen'" class="hover-class padding-l20 c-flex-row c-aligni-center c-width0 c-flex-grow1">
						<div :class="companyInfo.agentLevels == 0 ? 'svg-box-yellow-no-open':'svg-box-yellow'" class=" width38 height38 c-flex-row c-flex-center relative">
							<div v-if="companyInfo.agentLevels == 0" class="box-no-open">未开通</div>
							<svg-icon icon-class="icon_service" class="icon-service"/>
						</div>
						<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">服务商管理</span>
						</router-link>
						<router-link :to="companyInfo.enablePoints? '/marketing/point/rank':'/noOpen'" class="hover-class padding-l20 c-flex-row c-aligni-center c-width0 c-flex-grow1">
							<div :class="companyInfo.enablePoints == 0 ? 'svg-box-blue-no-open':'svg-box-blue'" class="svg-box-blue width38 height38 c-flex-row c-flex-center relative">
								<div v-if="companyInfo.enablePoints == 0" class="box-no-open">未开通</div>
								<svg-icon icon-class="icon_credit" class="icon-points"/>
							</div>
							<span class="font-s14 color-333 padding-l6 text-hover-blue hover-class-child">积分管理</span>
						</router-link>
					</div>
				</div>
			</div>

			<div class="font-s16 font-bold padding-t40">
				精彩案例
			</div>
		
			<div class="c-flex-row padding-t20">
				<div class="example-item c-flex-column c-flex-center c-width6-10" v-for="item in exampleData" @mouseover="itemIndex=item.caseId" @mouseout="itemIndex=0" :key="item.caseId">
					<div class="img-div"><img @load="setImgAttr" class="c-width100" :src="item.avatar"/></div>
					<div class="example-name c-text-ellipsis1">{{item.mpName}}</div>
					<div class="example-qrcode" :class=" itemIndex==item.caseId ? '':'visibility-hidden'">
						<div class="bg-qrcode"><img :src="bgQrCode" alt="" /></div>
						<img class="qrcode-img" :src="item.qrcodeImg"/>
						<div class="wechat-hover">微信扫一扫</div>
					</div>
				</div>
			</div>
	
		</div>
		<div class="padding-l30 padding-r30 width250">
			<div class="padding-b20"><span class="font-s16 font-bold">系统更新</span><router-link to="systemUpdateLog" class="padding-l12 color00a1fd font-s14 ">更多></router-link></div>
			<div v-for="(item,index) in sysUpdateList" :key="item.uiId" @click="showDialog(index,1)" class="hover-class padding-b10 font-s12 c-flex-row c-aligni-center">
				<span>{{item.createdAt}}更新</span><span class="c-flex-grow1 c-width0 padding-l10 font-s12 c-text-ellipsis1">{{item.title}}</span>
			</div>
			<div class="padding-b20 padding-t20"><span class="font-s16 font-bold">问题反馈</span><router-link to="myFeedback" class="padding-l12 color00a1fd font-s14 ">更多></router-link></div>
			<div v-for="(item,index) in feedbacks" :key="item.feedbackId" @click="showDialog(index,2)"  class="hover-class padding-b10 font-s12 c-flex-row c-aligni-center">
				<span>{{item.createdAt}}</span><span class="c-flex-grow1 c-width0 padding-l10 font-s12 c-text-ellipsis1">{{item.title}}</span>
			</div>
			<div class="c-flex-row c-flex-center"><router-link class="c-width100" to="myFeedback"><el-button  class="btn-index">我要反馈</el-button></router-link></div>
		</div>

		 <el-dialog class="check" :title="dialogContent.title" center :visible.sync="showDialogContent">
			<div class="c-overflow-h" v-html="dialogContent.content"></div>
			<div class="text-center padding-t20 font-s12">发布时间：{{dialogContent.relTime}}</div>
			
    </el-dialog>
  </div>
</template>

<script>
import { getCompanyRecentIncome, getRecentOrderCount } from '@/api/finance'
import { getCaseList, getOtherModule, getShopLink } from '@/api/company'
import { enableModules, isStaff } from '@/utils/permission'
import bgQrCode from '@/assets/QR_hover.png'

export default {
  data() {
    return {
      companyName: '',
      dialogContent: {},
      showDialogContent: false,
      bgQrCode,
      staff: -1,
      dayIncome: null,
      weekIncome: null,
      monthIncome: null,
      dayOrder: null,
      weekOrder: null,
      monthOrder: null,
      exampleData: [],
      itemIndex: 0,
      permission: 3,
      sysUpdateList: [],
      feedbacks: [],
      shopLinkQrcode: {},
      companyInfo: []
    }
  },
  created() {
    this.initStaffValue()
    this.initEnableModules()
    this.initData()
  },
  methods: {
    showDialog(index, type) {
      this.showDialogContent = true
      this.dialogContent = type == 1 ? this.sysUpdateList[index] : this.feedbacks[index]
    },
    initEnableModules() {
      this.companyInfo = enableModules()
    },
    initStaffValue() {
      this.staff = isStaff()
    },
    initData() {
      getCompanyRecentIncome().then(res => {
        this.dayIncome = res.data.data.day
        this.weekIncome = res.data.data.week
        this.monthIncome = res.data.data.month
        this.companyName = res.data.data.company
      }).catch(err => {
        console.log(err)
      })

      getRecentOrderCount().then(res => {
        this.dayOrder = res.data.data.day
        this.weekOrder = res.data.data.week
        this.monthOrder = res.data.data.month
      }).catch(err => {
        console.log(err)
      })

      getCaseList().then(res => {
        this.exampleData = res.data.data
      }).catch(err => {
        console.log(err)
      })

      getOtherModule().then(res => {
        this.feedbacks = res.data.data.feedbacks
        this.sysUpdateList = res.data.data.systemUpdateLogs
      }).catch(err => {
        console.log(err)
      })

      getShopLink().then(res => {
        console.log('查看店铺', res)
        this.shopLinkQrcode = res.data.data
      }).catch(err => {
        console.log(err)
      })
    },
    setImgAttr(e) {
      if (e.currentTarget.width > e.currentTarget.height) {
        e.currentTarget.className = 'c-height100'
      }
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.wechat-hover{
		position: absolute;
		font-size: 12px;
		top: 128px;
		left: 50%;
		transform: translate(-50%);
	}
	.hover-class{
		cursor: pointer;
	}
	.hover-class:hover{
		color: #409EFF;
	}
	.hover-class:hover .hover-class-child{
		color: #409EFF !important;
	}
  .noOpen {
    display: inline-block;
    height: 67px;
    width: 67px;
    border-radius: 50%;
    background-color: #5c6065;
    font-size: 12px;
    text-align: center;
    line-height: 67px;
    color: #fff;
  }
  .activeNoOpen {
    display: inline-block;
    height: 20px;
    width: 40px;
    border-radius: 10px;
    background-color: #ff4949;
    font-size: 9px;
    text-align: center;
    line-height: 20px;
    color: #fff;
    margin-left: 10px;
  }
	.color00a1fd {
		color: #409EFF !important;
	}


	.dashboard-editor-container {
		padding: 30px 0 30px 30px;
		background-color: #fff;
		min-width: 1000px;
	}
	.top-box{
		width: 100%;
		height: 100px;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #F9F9F9;
	}


	.example-div{
		width: 100%;
		background: #fff;
		padding: 5px;
	}
	.example-div h3{
		line-height: 50px;
		border-bottom:1px solid #ddd ;
		padding-left: 20px;
		font-size: 18px;
		font-weight: 500;
	}
	
	.example-item{
		padding: 0 0 20px 20px;
		position: relative;
		cursor: pointer;
	}
	.img-div{
		width: 48px;
    height: 48px;
    overflow: hidden;
	}
	
	.example-name{
		padding: 10px 0;
		font-size: 12px;
	}
	.example-qrcode{
		width: 136px;
    height: 144px;
    position: absolute;
    bottom: -112px;
		z-index: 2;
	}
	.bg-qrcode{
		width: 136px;
		height: 164px;
		position: absolute;
	}

	.qrcode-img{
		position: absolute;
		bottom: 20px;
		left: 18px;
		width: 100px;
    height: 100px;
    border: 0;
	}
	.box-no-open{
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 16px;
		background: rgba(0, 0, 0, 0.30);
		color: #fff;
		font-size: 10px;
		line-height: 16px;
		text-align: center;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		z-index: 2;
		
	}
	.svg-box-blue{
		background-color: #409EFF;
		border-radius:4px;
	}
	.hover-class:hover .svg-box-blue{
		background-color: #63b0ff !important;
	}
	.svg-box-yellow{
		background-color: #F8C342;
		border-radius:4px;
	}
	.hover-class:hover .svg-box-yellow{
		background-color: #FFD05D !important;
	}
	.svg-box-red{
		background-color: #FA6060;
		border-radius:4px;
	}
	.hover-class:hover .svg-box-red{
		background-color: #FF8181 !important;
	}
	.svg-box-green{
		background-color: #2ACD65;
		border-radius:4px;
	}
	.hover-class:hover .svg-box-green{
		background-color: #42D878 !important;
	}
	.svg-box-blue-no-open{
		background-color: rgba(64, 158, 255,0.4);
		border-radius:4px;
	}
	.svg-box-yellow-no-open{
		background-color: rgba(248, 195, 66,0.4);
		border-radius:4px;
	}
	.svg-box-red-no-open{
		background-color: rgba(250, 96, 96,0.4);
		border-radius:4px;
	}
	.svg-box-green-no-open{
		background-color: rgba(42, 205, 101,0.4);
		border-radius:4px;
	}

	.icon-base-info{
		font-size: 22px;
		color: #fff;
	}
	.icon-store-construct{
		font-size: 18px;
		color: #fff;
	}
	.icon-cat{
		font-size: 16px;
		color: #fff;
	}
	.icon-subaccount{
		font-size: 18px;
		color: #fff;
	}
	.icon-withdrawal{
		font-size: 16px;
		color: #fff;
	}
	.icon-user{
		font-size: 16px;
		color: #fff;
	}
	.icon-video{
		font-size: 18px;
		color: #fff;
	}
	.icon-audio{
		font-size: 15px;
		color: #fff;
	}
	.icon-graphic{
		font-size: 16px;
		color: #fff;
	}
	.icon-notice{
		font-size: 16px;
		color: #fff;
	}
	.icon-columns{
		font-size: 16px;
		color: #fff;
	}
	.icon-evaluation{
		font-size: 15px;
		color: #fff;
	}
	.icon-activity{
		font-size: 17px;
		color: #fff;
	}
	.icon-socail{
		font-size: 19px;
		color: #fff;
	}
	.icon-comment{
		font-size: 16px;
		color: #fff;
	}
	.icon-service{
		font-size: 18px;
		color: #fff;
	}
	.icon-points{
		font-size: 17px;
		color: #fff;
	}
	.btn-index{
		width: 100%;
		height: 36px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #529FEE;
		border: 1px solid #409EFF
	}
</style>
